<template>
  <div ref="chartDom"></div>
</template>

<script setup lang="ts">
import {ref, onMounted, onUnmounted, nextTick, toRaw} from 'vue';
import * as echarts from 'echarts';
import type {typeChartsLineData} from "@/store/dataType";
interface typeChartsLineData{
  titleText:string,
  xAxisData:string,
  seriesData:string
}
type Props = {
  chartsLineData:typeChartsLineData,
}
let props = defineProps<Props>()

let xAxisData = JSON.parse(localStorage.getItem(props.chartsLineData.xAxisData))
let seriesData = JSON.parse(localStorage.getItem(props.chartsLineData.seriesData))



// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartDom.value);
  const option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: props.chartsLineData.titleText
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    // legend: {
    //   //顶部的 选择区域
    //   data: ['Line 4', 'Line 5']
    // },
    toolbox: {
      emphasis: {
        iconStyle: {
          // borderColor: "#78a355"
          // borderColor: "#33a3dc"
          borderColor: "#009e7d"
        }
      },
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAxisData
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        // name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(2, 159, 126)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: seriesData
      }
    ]
  };
  chartInstance.setOption(option);
});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
/* 添加一些CSS样式来美化图表容器（可选） */
</style>
